<template>
  <div>
    <!-- 添加或修改土建过程话框 -->
    <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" :fullscreen="formActive == 1" width="800px" append-to-body @closed="reset()">
      <el-steps :active="formActive" finish-status="success" simple class="steps-row">
        <el-step title="基础信息" />
        <el-step title="抽取测区" />
      </el-steps>
      <el-form class="basic-info-form" v-show="formActive === 0" v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="110px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目" prop="projectId">
              <el-select v-model="form.projectId" placeholder="请选择项目" :disabled="!!form.prjchkId || isRecheck" filterable clearable style="width: 100%" @change="onChangeProject">
                <el-option v-for="project in formProjectOptions" :key="project.fid" :label="project.cflastname" :value="project.fid" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查单位" prop="rdcType">
              <el-radio-group v-model="form.rdcType" :disabled="!!form.prjchkId || isRecheck">
                <el-radio v-for="dict in dict.type.cq_random_type" :key="dict.value" :label="dict.value">{{ dict.label }} </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="display: flex;flex-wrap: wrap;">
          <el-col :span="12">
            <el-form-item label="检查人员" prop="principalId">
              <el-input v-model="form.principalUserName" readonly disabled v-if="form.prjchkId" />
              <el-select v-model="form.principalId" placeholder="请选择抽检人员" filterable :loading="principalLoading" style="width: 100%" @change="onChangePrincipalId" v-else>
                <el-option v-for="item in principalList" :key="item.fid" :label="item.nickName" :value="item.fid" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查日期" prop="checkDate">
              <el-date-picker v-model="form.checkDate" value-format="yyyy-MM-dd" type="date" :disabled="!!form.prjchkId" style="width: 100%" placeholder="选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查标段" prop="sectionId" style="height: 36px">
              <el-input v-model="form.section" readonly disabled v-if="isEdit || isRecheckRelation" />
              <el-select v-model="form.sectionId" placeholder="请选择检查标段" filterable :disabled="isRecheck" clearable :loading="sectionLoading" style="width: 100%" @change="onChangeSectionId" v-else>
                <el-option v-for="item in sectionList" :key="item.sectionId" :label="item.sectionAlias || item.sectionName" :value="item.sectionId" style="height: auto;">
                  <div style="padding: 5px 0">
                    <div style="font-size: 14px; line-height: 24px">{{ item.sectionAlias || item.sectionName }}</div>
                    <div style="color: #8492a6; font-size: 12px; line-height: 14px">{{ item.constructionName || item.constructionId }}</div>
                  </div>
                </el-option>
                <el-option v-if="!sectionList.length" value="">
                  <div class="add-section-tip">请先添加相关项目检查标段</div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工单位" style="height: 36px">
              <el-input placeholder="请选择检查标段" v-model="form.constructionName" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="检查类型" prop="progressChkType">
              <el-select v-model="form.progressChkType" placeholder="检查类型" :disabled="!!form.prjchkId || isRecheckRelation" style="width: 100%" @change="onChangeChkType">
                <el-option v-for="dict in dict.type.cq_progress_chk_type" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.progressChkType === CQ_PROGRESS_CHK_TYPE.SPECIAL_CHK">
            <el-form-item label="专项检查类型">
              <el-select v-model="form.status" placeholder="专项检查类型" :disabled="isEdit || isRecheckRelation" style="width: 100%" @change="onChangeStatus">
                <el-option v-for="dict in checkStatusList" :key="dict.value" :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="!form.prjchkId && form.progressChkType === CQ_PROGRESS_CHK_TYPE.SPECIAL_CHK && form.status !== 1">
            <el-form-item label="关联过程检查" prop="recheckPrjchkId">
              <el-select v-model="form.recheckPrjchkId" :loading="relationLoading" placeholder="请选择关联过程" filterable :disabled="isRecheckRelation" clearable style="width: 100%" @change="onChangeRecheck">
                <el-option v-for="recheck in recheckList" :key="recheck.prjchkId" :label="recheck.showDeptName" :value="recheck.prjchkId" style="height: auto">
                  <div style="padding: 5px 0">
                    <div style="font-size: 14px; line-height: 24px">{{ recheck.showDeptName }}</div>
                    <div style="color: #8492a6; font-size: 12px; line-height: 14px">{{ recheck.constructionName }}</div>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!--<el-col :span="12">
            <el-form-item label="施工单位" prop="constructionId" style="height: 36px">
              <el-input v-model="form.constructionName" readonly disabled v-if="isEdit || isRecheckRelation" />
              <el-select v-model="form.constructionId" placeholder="请选择施工单位" filterable :disabled="isRecheck" clearable :loading="constructionLoading" style="width: 100%" @change="onChangeConstructionId" v-else>
                <el-option v-for="item in constructionList" :key="item.sectionId || item.constructionId" :label="item.constructionName" :value="item.constructionId" style="height: auto;" @click.native.prevent="constructionOptionClick(item)">
                  <div style="padding: 5px 0">
                    <div style="font-size: 14px; line-height: 24px">{{ item.constructionName || item.constructionId }}</div>
                    <div style="color: #8492a6; font-size: 12px; line-height: 14px">{{ item.sectionAlias || item.sectionName }}</div>
                  </div>
                </el-option>
                <el-option v-if="constructionScope === 'project'" value="" disabled @click.native.prevent="showAllConstruction">
                  <el-button size="mini" type="text" icon="el-icon-plus">更多</el-button>
                </el-option>
                <el-option v-if="constructionScope === 'all'" value="" @click.native="showEditRdcConstruction = true">
                  <el-button size="mini" type="text" icon="el-icon-plus">添加施工单位</el-button>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="项目(检查口径)" prop="inpectionCaliber"><el-input v-model.trim="form.inpectionCaliber" placeholder="请输入检查球号对应名称" :maxlength="255" /></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="施工单位负责人" prop="constructionUser"><el-input v-model.trim="form.constructionUser" placeholder="请输入施工单位负责人" :maxlength="255" /></el-form-item>
          </el-col>
          <!-- <el-col :span="12" v-if="processType === 'handcover'">
            <el-form-item label="标段" prop="section">
              <el-input v-model.trim="form.section" placeholder="请输入标段，例如：一标段" clearable style="width: 100%" />
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="项目总" prop="xmzName">
              <el-input class="fake-selector" readonly v-model="form.xmzName" auto-complete="off" placeholder="请选择项目总" @click.native="openSelectUser('xmzId', 'xmzName', true)">
                <i slot="append" class="el-icon-arrow-down" />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目工程负责人" prop="xmPrincipalName">
              <el-input class="fake-selector" readonly v-model="form.xmPrincipalName" auto-complete="off" placeholder="请选择项目工程负责人" @click.native="openSelectUser('xmPrincipalId', 'xmPrincipalName', true)">
                <i slot="append" class="el-icon-arrow-down" />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目经理" prop="xmjlName">
              <el-input class="fake-selector" readonly v-model="form.xmjlName" auto-complete="off" placeholder="请选择项目经理" @click.native="openSelectUser('xmjlId', 'xmjlName', true)">
                <i slot="append" class="el-icon-arrow-down" />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="集群分管领导" prop="colonyName">
              <el-input class="fake-selector" readonly v-model="form.colonyName" auto-complete="off" placeholder="请选择集群分管领导" @click.native="openSelectUser('colonyId', 'colonyName', true)">
                <i slot="append" class="el-icon-arrow-down" />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事业部分管领导" prop="businessName">
              <el-input class="fake-selector" readonly v-model="form.businessName" auto-complete="off" placeholder="请选择事业部分管领导" @click.native="openSelectUser('businessId', 'businessName', true)">
                <i slot="append" class="el-icon-arrow-down" />
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="processType !== 'handcover'">
            <el-form-item label="陪检专家" prop="expertName">
              <el-input class="fake-selector" readonly v-model="form.expertName" auto-complete="off" placeholder="请选择陪检专家" @click.native="openSelectUser('expertId', 'expertName', true)">
                <i slot="append" class="el-icon-arrow-down" />
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="construction-dialog-footer">
          <el-button type="primary" :loading="submitFormLoading" @click="btnSubmitForm">确 定</el-button>
          <el-button v-if="form.prjchkId" type="success" @click="goStep1">下 一 步</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </el-form>
      <div v-show="formActive === 1" class="spot-check-area">
        <div class="pool-condition">
          <div class="pool-item">
            <el-form ref="randomForm" :model="randomForm" :rules="randomRules" label-width="80px">
              <div class="pool-title">抽取范围</div>
              <el-form-item label="模块" prop="chkitemCode">
                <el-select v-model="randomForm.chkitemCode" placeholder="请选择模块" clearable style="width: 200px">
                  <div v-for="item in scoreTypeList" :key="item.chkitemCode">
                    <el-option-group :label="item.chkitemName" v-if="item.children && item.children.length > 0">
                      <el-option v-for="child in item.children" :key="child.chkitemCode" :label="child.chkitemName" :value="child.chkitemCode" style="font-size: 14px; padding-left: 30px" />
                    </el-option-group>
                    <el-option :label="item.chkitemName" :value="item.chkitemCode" style="font-size: 14px" v-else />
                  </div>
                </el-select>
              </el-form-item>
              <el-form-item label="测区类型" prop="randomMethod">
                <el-select v-model="randomForm.randomMethod" placeholder="测区类型" clearable style="width: 200px" @change="randomTypeChange">
                  <el-option v-for="dict in areaTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="防火分区" prop="buildingId" key="firezone" :rules="randomRules.firezone" v-if="randomForm.randomMethod === 'firezone'">
                <el-select class="select-firezone" v-model="randomForm.buildingId" placeholder="请选择防火分区" collapse-tags multiple style="width: 200px">
                  <el-option-group v-for="group in firezoneList" :key="group.fid" :label="group.fnameL2">
                    <el-option v-for="item in group.children" :key="item.fid" :label="item.fnameL2" :value="item.fid" style="font-size: 14px; padding-left: 30px" />
                  </el-option-group>
                </el-select>
                <i class="el-icon-refresh build-refresh" :class="{ loading: buildingLoading }" @click="getBuildingList" />
              </el-form-item>
              <el-form-item label="楼栋" prop="buildingId" key="buildingId" :rules="randomRules.buildingId" v-else>
                <el-select v-model="randomForm.buildingId" placeholder="请选择楼栋" collapse-tags multiple filterable clearable style="width: 200px">
                  <el-option v-for="build in buildList" :key="build.fid" :label="build.fnameL2" :value="build.fid" />
                  <!--
                  <div style="height: 40px" />
                  <div class="building-select flex-sb">
                    <el-button size="mini" @click="selectAllBuildings">全选</el-button>
                    <el-button size="mini" @click="reverseSelectBuildings">反选</el-button>
                  </div>
                  -->
                </el-select>
                <i class="el-icon-refresh build-refresh" :class="{ loading: buildingLoading }" @click="getBuildingList" />
              </el-form-item>
              <el-form-item label="楼层范围" prop="startfloor" :rules="randomRules.floorRange" v-if="['floor', 'room'].includes(randomForm.randomMethod)">
                <el-input-number v-model="randomForm.startfloor" :max="1e8" :precision="0" :controls="false" placeholder="开始楼层" style="width: 90px" />
                <i class="el-icon-minus relation-accord" />
                <el-input-number v-model="randomForm.endfloor" :max="1e8" :precision="0" :controls="false" placeholder="结束楼层" style="width: 90px" />
              </el-form-item>
              <el-form-item label="房间范围" prop="startRoom" :rules="randomRules.roomRange" v-if="randomForm.randomMethod == 'room'">
                <el-input-number v-model="randomForm.startRoom" :max="1e8" :precision="0" :controls="false" placeholder="开始房号" style="width: 90px" />
                <i class="el-icon-minus relation-accord" />
                <el-input-number v-model="randomForm.endRoom" :max="1e8" :precision="0" :controls="false" placeholder="结束房号" style="width: 90px" />
              </el-form-item>
              <el-form-item style="margin-bottom: 0">
                <el-button type="primary" size="mini" @click="addPool">新 增</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="poolList" height="360" size="mini" style="margin-left: 5px">
              <el-table-column label="模块" prop="scoreTypeName" sortable min-width="80" />
              <el-table-column label="类型" prop="areaTypeName" sortable min-width="80" />
              <el-table-column min-width="120" sortable label="楼栋/公区">
                <template slot-scope="scope">{{ scope.row.buildingId | buildFilter(build2Name) }}</template>
              </el-table-column>
              <el-table-column min-width="100" label="楼层">
                <template slot-scope="scope">{{ scope.row.startfloor }}-{{ scope.row.endfloor }}</template>
              </el-table-column>
              <el-table-column min-width="80" label="室号">
                <template slot-scope="scope">{{ scope.row.startRoom }}-{{ scope.row.endRoom }}</template>
              </el-table-column>
              <el-table-column label="操作" align="center" min-width="80" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="deletePool(scope.$index)">删除 </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pool-item" style="margin-left: 10px">
            <el-form ref="generateCondition" :model="generateCondition" :rules="randomRules" label-width="80px" style="width: 230px">
              <div class="pool-title">抽取设置</div>
              <el-form-item label="模块" prop="chkitemCode">
                <el-select v-model="generateCondition.chkitemCode" placeholder="请选择模块" clearable style="width: 100%" @change="changeConditionScoreType">
                  <div v-for="item in conditionScoreTypeList" :key="item.chkitemCode">
                    <el-option-group :label="item.chkitemName" v-if="item.children && item.children.length > 0">
                      <el-option v-for="child in item.children" :key="child.chkitemCode" :label="child.chkitemName" :value="child.chkitemCode" style="font-size: 14px; padding-left: 30px" />
                    </el-option-group>
                    <el-option :label="item.chkitemName" :value="item.chkitemCode" style="font-size: 14px" v-else />
                  </div>
                </el-select>
              </el-form-item>
              <el-form-item ref="conditionRandomMethod" label="测区类型" prop="randomMethod">
                <el-select v-model="generateCondition.randomMethod" placeholder="测区类型" clearable style="width: 100%" @change="changeConditionRandomMethod">
                  <el-option v-for="dict in conditionAreaTypeList" :key="dict.value" :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item>
              <el-form-item label="楼层类型" prop="floorType" v-if="showFloorType" :rules="randomRules.floorType">
                <el-select v-model="generateCondition.floorType" placeholder="楼层类型" style="width: 100%">
                  <el-option v-for="(val, key) in floorTypeData" :key="key" :label="val" :value="+key" />
                </el-select>
              </el-form-item>
              <el-form-item label="抽取数量" prop="randomCount">
                <el-input-number v-model="generateCondition.randomCount" placeholder="请输入数量" controls-position="right" :min="1" style="width: 100%" />
              </el-form-item>
              <el-form-item label="楼栋平均" prop="byBuilding" style="margin-top: -16px; margin-bottom: 6px" v-if="showByBuilding">
                <el-switch v-model="generateCondition.byBuilding" />
              </el-form-item>
              <el-form-item style="margin-bottom: 0">
                <el-button type="primary" size="mini" @click="addCondition">新 增</el-button>
                <br>
                <el-button type="text" @click="showRandomRecordList = true">抽取设置历史</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="conditionList" height="340" size="mini" style="margin-left: 10px">
              <el-table-column label="模块" prop="scoreTypeName" sortable min-width="80" />
              <el-table-column label="类型" prop="randomMethodName" sortable min-width="80" />
              <el-table-column prop="randomCount" min-width="80" label="抽检数量" />
              <el-table-column label="操作" align="center" min-width="80" fixed="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteCondition(scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-button class="btn-generate" type="primary" size="mini" :loading="generateLoading" @click="btnGenerateRandom">测区生成</el-button>
          </div>
        </div>

        <div style="height: 10px" />
        <RdcAreaList ref="RdcAreaList" :process-type="processType" :score-type-list="scoreTypeList" :random-id="form.prjchkId" height="calc(100vh - 600px)" />

        <div style="height: 30px" />
        <div class="action-btns">
          <el-button type="text" :disabled="generateLoading" @click="$refs.RdcAreaList.showResDialog()">查看抽取结果</el-button>
          <el-button :disabled="generateLoading" @click="formActive = 0">上 一 步</el-button>
          <el-button type="primary" :disabled="generateLoading" @click="handleOk">完 成</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 选择人员 -->
    <select-user-dialog :show.sync="showSelectUserVisible" :selected="selectedUser" :multi="selectUserOption.multi" :max-num="5" @select="selectUserCallback" />
    <!-- 编辑施工单位 -->
    <EditRdcConstruction ref="EditRdcConstruction" v-model="showEditRdcConstruction" @ok="getConstructionList" />
    <RandomRecordList :process-type="processType" :project-id="form.projectId" :random-id="form.prjchkId" v-model="showRandomRecordList" />
    <SimilarDataConfirm ref="SimilarDataConfirm" :process-type="processType" @confirm="submitForm({ isRepeatEntry: 'allow' })" />
  </div>
</template>

<script>
import store from '@/store'
import auth from '@/plugins/auth'
import { debounce, flatList2tree, isObjectValueEqual } from '@/utils'
import SelectUserDialog from '../../../components/SelectUserDialog.vue'
import { getUserByRoleKey } from '@/api/system/user'
import { listRdcConstruction, listSectionCons } from '@/api/qualityManage/cq'
import { selectAuthUserProject, getCqBuildingList, generateRandom, listRecordsNew } from '@/api/projectInspection/courseCheck'
import { cqEvalPrjchkAdd, cqEvalPrjchkEdit } from '@/api/checkScore/courseCheck'
import RdcAreaList from './addUpdate/RdcAreaList'
import RandomRecordList from './addUpdate/RandomRecordList'
import SimilarDataConfirm from './addUpdate/SimilarDataConfirm'
import EditRdcConstruction from '@/views/cq/components/EditRdcConstruction'
import { CQ_PROGRESS_CHK_TYPE, chkStep, checkStatusList } from '@/utils/baseData'
import { listChkitem } from '@/api/checkScore/cqEval.js'
let currentRelationRow = {}
export default {
  name: 'AddUpdate',
  components: { SelectUserDialog, RdcAreaList, RandomRecordList, SimilarDataConfirm, EditRdcConstruction },
  dicts: ['cq_random_type', 'cq_random_area_type', 'cq_progress_chk_type', 'cq_progress_chk_step'],
  filters: {
    dictType(val, list) {
      for (let i = 0; i < list.length; i++) {
        if (list[i].dictValue === val) {
          return list[i].dictLabel
        }
      }
    },
    buildFilter(ids, build2Name) {
      if (Array.isArray(ids)) return ids.map(id => build2Name[id]).join(',')
      return build2Name[ids] || ''
    }
  },
  props: {
    processType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 表单步骤
      formLoading: false,
      formActive: 0,
      open: false,
      // 弹出层标题
      title: '',
      buildingLoading: false,
      buildings: [], // 楼栋列表。用于 楼栋,地下室,防火分区
      versionCode: '', // 检查项版本
      // 测区生成器 表单
      randomForm: {
        versionCode: '',
        buildingId: [],
        chkitemCode: [],
        startfloor: null,
        endfloor: null,
        startRoom: null,
        endRoom: null,
        randomMethod: ''
      },
      formProjectOptions: [],
      randomRules: {
        randomMethod: [{ required: true, message: '请选择测区类型', trigger: 'change' }],
        buildingId: [{ required: true, message: '请选择楼栋' }],
        floorRange: [
          { required: true, message: '请输入楼层范围' },
          {
            validator: (rule, val, cb) => {
              const min = this.randomForm.startfloor
              const max = this.randomForm.endfloor
              if (typeof min !== 'number' || typeof max !== 'number') return cb('请输入楼层范围')
              if (max < min) return cb('结束楼层不能小于开始楼层')
              cb()
            }
          }
        ],
        roomRange: [
          { required: true, message: '请输入房间范围' },
          {
            validator: (rule, val, cb) => {
              const min = this.randomForm.startRoom
              const max = this.randomForm.endRoom
              if (typeof min !== 'number' || typeof max !== 'number') return cb('请输入房间范围')
              if (max < min) return cb('结束房号不能小于开始房号')
              cb()
            }
          }
        ],
        firezone: [{ required: true, message: '请选择防火分区' }],
        chkitemCode: [{ required: true, message: '请选择模块', trigger: 'change' }],
        floorType: [{ required: true, message: '请选择楼层类型' }],
        randomCount: [{ required: true, message: '请填写抽取数量', trigger: 'blur' }]
      },
      // 表单参数
      form: {
        prjchkId: '',
        projectId: '',
        rdcType: '',
        principalId: '',
        principalUserName: '',
        checkDate: '',
        progressChkType: '',
        xmzId: '',
        xmzName: '',
        xmPrincipalId: '',
        xmPrincipalName: '',
        xmjlId: '',
        xmjlName: '',
        colonyId: '',
        colonyName: '',
        businessId: '',
        businessName: '',
        expertId: '',
        expertName: '',
        constructionId: '',
        constructionName: '',
        constructionUser: '',
        inpectionCaliber: '',
        section: '',
        sectionId: '',
        recheckPrjchkId: '', // 复检关联Id
        status: 1 // 1常规单据 （默认）  2 复查单据  3 重新检查单据
      },
      formChkStep: 'NORMAL',
      // 表单校验
      rules: {
        projectId: [{ required: true, message: '请选择项目', trigger: 'change' }],
        progressChkType: [{ required: true, message: '请选择检查类型', trigger: 'change' }],
        rdcType: [{ required: true, message: '请选择检查单位', trigger: 'change' }],
        recheckPrjchkId: [{ required: true, message: '请选择关联过程检查', trigger: 'change' }],
        checkDate: [{ required: true, message: '请选择检查时间', trigger: 'change' }],
        principalId: [{ required: true, message: '请选择检查人员', trigger: 'change' }],
        sectionId: [{ required: true, message: '请选择检查标段', trigger: 'change' }]
      },
      submitFormLoading: false,
      specialTypeName: '',
      // 选择用户窗口
      showSelectUserVisible: false,
      selectUserOption: { idField: '', nameField: '', multi: false },
      selectedUser: [],
      principalLoading: false,
      principalList: [], // 检查人员
      constructionLoading: false,
      constructionScope: 'project', // 选取 施工单位 范围， project: 根据项目，all: 全部
      constructionList: [], // 施工单位
      constructionListAll: [], // 所有施工单位
      showEditRdcConstruction: false, // 添加施工单位的弹窗
      poolList: [],
      // 楼层类型。仅楼层范围出现 -1 及以下时使用
      floorTypeData: { 1: '全部', 2: '地上', 3: '地下' },
      generateCondition: {
        chkitemCode: null,
        randomMethod: null,
        floorType: null,
        randomCount: null,
        byBuilding: false
      },
      conditionList: [],
      generateLoading: false,
      user: this.$store.state.user.user,
      showRandomRecordList: false, // 抽取设置历史
      isRecheck: false, // 是否 复检 或 重新检查
      isRecheckRelation: false, // 是否 从 复检 或 重新检查 入口进入
      recheckList: [], // 复检关联过程
      relationLoading: false,
      CQ_PROGRESS_CHK_TYPE: CQ_PROGRESS_CHK_TYPE,
      chkStep: chkStep,
      checkStatusList: checkStatusList,
      sectionLoading: false,
      sectionList: [], // 标段列表
      scoreTypeList: []
    }
  },
  computed: {
    isEdit() {
      // 编辑时
      return !!this.form.prjchkId
    },
    // scoreTypeList() {
    //   const { processType } = this
    //   if (!processType) return []
    //   const item = inspectTypeList.find(i => i.processType === processType)
    //   return item?.scoreTypeList || []
    // },
    // scoreType2label() {
    //   return getScoreTypeEnum(this.processType) || {}
    // },
    areaTypeList() {
      // 过滤地下室
      const list = this.dict.type.cq_random_area_type || []
      return list.filter(i => i.value !== 'under')
    },
    buildList() {
      // 过滤楼栋列表
      const m = this.randomForm.randomMethod
      const list = this.buildings
      if (m === 'under') return list.filter(i => i.publicareatype === 3)
      return list.filter(i => !i.publicareatype)
    },
    firezoneList() {
      // 获取地下室和防火分区，重构为树形
      const list = this.buildings.filter(i => [3, 5].includes(i.publicareatype))
      let data = JSON.parse(JSON.stringify(list))
      data = flatList2tree(data, { id: 'fid' })
      return data.filter(i => i.children?.length)
    },
    isBuildType() {
      const m = this.randomForm.randomMethod
      return ['build', 'under', 'firezone'].includes(m)
    },
    build2Name() {
      // 通过 fid 获取 fnameL2
      return this.buildings.reduce((o, i) => !void (o[i.fid] = i.fnameL2) && o, {})
    },
    conditionScoreTypeList() {
      // 过滤出池里的模块
      const list = JSON.parse(JSON.stringify(this.scoreTypeList))
      const arr = this.poolList.map(i => i.chkitemCode)
      // 去重
      const scoreTypes = arr.filter((a, b) => arr.indexOf(a) === b)

      const recursion = list =>
        list.filter(item => {
          if (item.children?.length) item.children = recursion(item.children)
          return scoreTypes.includes(item.chkitemCode) || item.children?.length
        })
      return recursion(list)
    },
    conditionAreaTypeList() {
      // 过滤出池里该模块的所有测区类型
      const { areaTypeList } = this
      const { chkitemCode } = this.generateCondition
      const areaTypes = []
      this.poolList.map(i => {
        if (chkitemCode && i.chkitemCode !== chkitemCode) return
        if (areaTypes.includes(i.randomMethod)) return
        areaTypes.push(i.randomMethod)
      })
      return areaTypes.length ? areaTypeList.filter(i => areaTypes.includes(i.value)) : areaTypeList
    },
    showFloorType() {
      // 显示楼层类型。当前测区类型选楼层，且抽取范围列表内出现楼层小于0时显示
      const m = this.generateCondition.randomMethod
      const list = this.poolList
      // const lt0 = list.some(i => ['floor', 'room'].includes(i.randomMethod) && i.startfloor < 0)
      const lt0 = list.some(i => typeof i.startfloor === 'number' && i.startfloor < 0)
      return m === 'floor' && lt0
    },
    showByBuilding() {
      // 显示是否按楼栋平均。测区类型为楼层或房间时显示
      const m = this.generateCondition.randomMethod
      return ['floor', 'room'].includes(m)
    }
  },
  watch: {
    showFloorType(val) {
      // 删除抽取范围，使 floorType 不显示时重置值
      if (val) return
      this.generateCondition.floorType = null
    },
    showByBuilding(val) {
      // byBuilding 不显示时重置值
      if (val) return
      this.generateCondition.byBuilding = false
    },
    'form.projectId'(val) {
      // this.getConstructionListByProject(val)
      this.getSectionListByProject(val)
    }
  },
  created() {
    this.randomForm.versionCode = this.$route.query.versionCode
    this.versionCode = this.$route.query.versionCode
    this.btnSubmitForm = debounce(this.submitForm, 1e3, true)
    this.btnGenerateRandom = debounce(this.generateRandom, 1e3, true)
    this.getAuthUserProjectList()
    this.getListChkitem()
  },
  mounted() {
    // const path = this.$route.path
    this.title = this.$route.query.chkitemName
  },
  methods: {
    async getListChkitem() {
      const params = {
        versionCode: this.$route.query.versionCode,
        chkitemCode: this.$route.query.chkitemCode
      }
      if (!params.versionCode || !params.chkitemCode) return

      this.listLoading = true
      const res = await listChkitem(params).catch(() => false)
      this.listLoading = false
      if (res === false) return

      let data = res.data.filter(item => item.chkitemCode !== params.chkitemCode) || []
      data.map(i => {
        i.isEnableLoading = false
        i.removeLoading = false
      })
      data = flatList2tree(data, { id: 'chkitemId' })
      data.unshift({ chkitemName: '随机楼栋', chkitemCode: 'sjld' })
      this.scoreTypeList = data
    },
    /** 查询过程列表 */
    async getList(status) {
      const opt = {
        pageNum: 1,
        pageSize: 9999,
        isEnable: 1,
        status: status,
        processType: this.processType,
        projectId: this.form.projectId || ''
      }
      this.relationLoading = true
      const res = await listRecordsNew(opt).catch(() => false)
      this.relationLoading = false
      if (res === false) return
      const data = res.data || []
      // 将当前过程增加到待关联列表
      if (this.isRecheckRelation && !data.some(item => item.prjchkId === currentRelationRow.prjchkId)) {
        data.push(currentRelationRow)
      }
      const deptName = i => [i.projectName, i.checkDate].filter(i => i).join(' - ')
      data.map(i => {
        i.showDeptName = deptName(i)
      })
      this.recheckList = data
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.getConstructionList()
      this.getPrincipalList()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      // 将 row 里的对应字段值赋值到 form
      Object.keys(this.form).map(k => (this.form[k] = typeof row[k] !== 'undefined' ? row[k] : ''))
      this.open = true
      this.getBuildingList()
      this.getConstructionList()
      this.getPrincipalList()
    },
    // 处理 复检 或 重新检查
    handleRecheck(row) {
      if (row.chkStep === chkStep.NEEDRECHK || row.chkStep === chkStep.NEEDDOUCHK) {
        currentRelationRow = JSON.parse(JSON.stringify(row))
        this.isRecheckRelation = true
        this.isRecheck = true
        row.recheckPrjchkId = row.prjchkId
        row.prjchkId = ''
        row.progressChkType = CQ_PROGRESS_CHK_TYPE.SPECIAL_CHK // 专项检查
        row.checkDate = new Date()
        row.status = row.chkStep === chkStep.NEEDRECHK ? 2 : 3
        this.getList(row.status - 1)
        this.handleUpdate(row)
      } else {
        this.handleAdd()
      }
    },
    onChangeProject() {
      this.form.constructionName = ''
      this.form.constructionId = ''
      this.form.section = ''
      this.form.sectionId = ''
      this.getBuildingList()
      // this.getPrincipalList()
      this.changeXmPrincipal()
    },
    // 检查类型改变
    onChangeChkType(val) {
      this.form.recheckPrjchkId = ''
      this.form.status = 1
      this.isRecheck = false
    },
    // 专项检查类型改变
    onChangeStatus(val) {
      this.form.recheckPrjchkId = null
      if (val === 1) {
        this.isRecheck = false
      } else if (val === 2) {
        this.isRecheck = true
        this.getList(1)
      } else if (val === 3) {
        this.isRecheck = true
        this.getList(2)
      }
    },
    // 改变关联复检
    onChangeRecheck(val) {
      const userFid = store.getters.user?.fid
      const { form } = this
      const rowObj = this.recheckList.find(item => item.prjchkId === val)
      if (!rowObj) return
      const row = JSON.parse(JSON.stringify(rowObj))
      this.isRecheck = true
      row.recheckPrjchkId = row.prjchkId
      row.prjchkId = ''
      row.progressChkType = CQ_PROGRESS_CHK_TYPE.SPECIAL_CHK // 专项检查
      row.checkDate = new Date()
      row.status = this.form.status
      Object.keys(this.form).map(k => (this.form[k] = typeof row[k] !== 'undefined' ? row[k] : ''))
      // 新增时，若登录用户是抽检人员，自动填入
      if (form.prjchkId || form.principalId || !auth.hasRole('GCCJRY') || !userFid) return
      const item = this.principalList.find(i => i.fid === userFid)
      if (!item) return
      form.principalId = item.fid
      form.principalUserName = item.nickName
    },
    // 获取施工单位
    async getConstructionList() {
      this.constructionLoading = true
      const res = await listRdcConstruction().catch(() => false)
      this.constructionLoading = false
      if (res === false) return
      this.constructionListAll = res.data || []
    },
    // 获取检查标段 根据项目
    async getSectionListByProject(curProjectId) {
      if (!curProjectId) return
      this.sectionLoading = true
      // const path = this.$route.path
      const params = {
        curProjectId,
        // sectionType: path.includes('ConstructionCourse') ? 'ENG_SEC ' : 'HARD_SEC'
        sectionType: this.$route.query.chkitemCode === 'GC-001-001' ? 'ENG_SEC ' : 'HARD_SEC' // GC-001-001 土建过程
      }
      const res = await listSectionCons(params).catch(() => false)
      this.sectionLoading = false
      if (res === false) return
      this.sectionList = res.data || []
      if (this.form.sectionId) {
        this.onChangeSectionId(this.form.sectionId)
      }
    },
    onChangeSectionId(sectionId) {
      if (!sectionId) return (this.form.section = '')
      const item = this.sectionList.find(i => i.sectionId === sectionId)
      if (item) {
        this.form.constructionName = item?.constructionName || ''
        this.form.constructionId = item.constructionId || ''
        this.form.section = item.sectionAlias || item.sectionName || ''
      }
    },
    // 获取施工单位 根据项目
    /*    async getConstructionListByProject(curProjectId) {
      if (!curProjectId) return
      this.constructionLoading = true
      this.constructionScope = 'project'
      const path = this.$route.path
      const params = {
        curProjectId,
        sectionType: path.includes('ConstructionCourse') ? 'ENG_SEC ' : 'HARD_SEC'
      }
      const res = await listSectionCons(params).catch(() => false)
      this.constructionLoading = false
      if (res === false) return
      this.constructionList = res.data || []
      if (this.constructionList.length === 0) {
        if (this.constructionListAll.length > 0) {
          this.constructionScope = 'all'
          this.constructionList = this.constructionListAll
        }
      }
      if (this.form.constructionId) {
        this.onChangeConstructionId(this.form.constructionId)
      }
    },*/
    // 施工单位改变时，手动赋值 constructionName
    /*    onChangeConstructionId(id) {
      if (!id) return (this.form.constructionName = '')
      const list = this.constructionList || []
      const item = list.find(i => i.constructionId === id)
      if (item) {
        this.form.constructionName = item?.constructionName || ''
        this.form.sectionId = item.sectionId || ''
        this.form.section = item.sectionAlias || item.sectionName || ''
      }
    },*/
    /* constructionOptionClick(item) {
      if (item.sectionId) {
        this.form.sectionId = item.sectionId || ''
        this.form.section = item.sectionAlias || item.sectionName || ''
      }
    },*/
    // 显示所有施工单位
    /* showAllConstruction() {
      this.constructionScope = 'all'
      this.constructionList = this.constructionListAll
    },*/
    // 增加待抽检
    async addPool() {
      const valid = await this.$refs.randomForm.validate().catch(() => false)
      if (!valid) return

      const list = this.poolList
      const form = { ...this.randomForm }
      const { chkitemCode, randomMethod } = form
      // 解决模块和类型不能排序
      form.scoreTypeName = this.scoreType2label(chkitemCode)
      form.areaTypeName = this.dict?.label.cq_random_area_type[randomMethod]

      // 楼栋和防火分区，判断无重复后直接添加
      if (['build', 'firezone'].includes(randomMethod)) {
        for (const item of list) {
          if (isObjectValueEqual(item, form)) return this.$message.info('该抽取范围已存在，请勿重复添加')
        }
        this.poolList.unshift(form)
        return
      }

      // 根据多选的楼栋拆分，分别添加
      const listLen = list.length
      const buildIds = form.buildingId || []
      buildIds.map(buildingId => {
        const data = { ...form, buildingId }
        for (const item of list) {
          if (isObjectValueEqual(item, data)) return
        }
        list.unshift(data)
      })
      if (listLen === list.length) return this.$message.info('该抽取范围已存在，请勿重复添加')
    },
    scoreType2label(chkitemCode) {
      let cname = ''
      for (let i = 0; i < this.scoreTypeList.length; i++) {
        if (this.scoreTypeList[i].children && this.scoreTypeList[i].children.length > 0) {
          const clist = this.scoreTypeList[i].children
          clist.forEach(item => {
            if (item.chkitemCode === chkitemCode) {
              cname = item.chkitemName
            }
          })
        } else {
          if (this.scoreTypeList[i].chkitemCode === chkitemCode) {
            cname = this.scoreTypeList[i].chkitemName
          }
        }
      }
      return cname
    },
    deletePool(index) {
      this.poolList.splice(index, 1)
    },
    // 增加待抽规则
    async addCondition() {
      const valid = await this.$refs.generateCondition.validate().catch(() => false)
      if (!valid) return

      const { floorTypeData } = this
      const form = { ...this.generateCondition }
      const { chkitemCode, randomMethod, floorType } = form
      const scoreTypeName = this.scoreType2label(chkitemCode)
      const areaTypeName = this.dict?.label.cq_random_area_type[randomMethod]
      const floorTypeName = floorType ? `_${floorTypeData[floorType]}` : ''
      const randomMethodName = `${areaTypeName}${floorTypeName}`
      const list = this.conditionList

      // 同个 模块+类型+楼层类型 只能设一次
      const isExist = list.find(i => i.chkitemCode === chkitemCode && i.randomMethod === randomMethod && i.floorType === floorType)
      if (isExist) {
        this.$message.info(`已存在设置 ${scoreTypeName} + ${randomMethodName}`)
        return
      }

      form.scoreTypeName = scoreTypeName
      form.randomMethodName = randomMethodName
      this.conditionList.unshift(form)
    },
    deleteCondition(index) {
      this.conditionList.splice(index, 1)
    },
    // 抽取测区类型改变
    randomTypeChange(val) {
      const form = this.randomForm
      this.randomForm = {
        ...form,
        buildingId: [],
        startfloor: null,
        endfloor: null,
        startRoom: null,
        endRoom: null
      }
    },
    // 选择楼栋获取焦点提示
    // buildFoucus() {
    //   if (!this.form.projectId) {
    //     this.$message.error('请先选择项目。')
    //     this.$refs.form.validateField('projectId')
    //   }
    // },
    // 根据项目ID获取楼栋列表
    async getBuildingList() {
      if (this.buildingLoading) return
      this.buildingLoading = true
      const { projectId } = this.form
      const res = await getCqBuildingList({ projectId }).catch(() => false)
      this.buildingLoading = false
      if (res === false) return (this.buildings = [])
      this.buildings = res.data || []

      // 清除已选楼栋
      this.randomForm.buildingId = []
    },
    // 全选楼栋
    selectAllBuildings() {
      this.randomForm.buildingId = this.buildList.map(i => i.fid)
    },
    // 反选楼栋
    reverseSelectBuildings() {
      const selected = this.randomForm.buildingId || []
      const ids = []
      this.buildList.map(i => !selected.includes(i.fid) && ids.push(i.fid))
      this.randomForm.buildingId = ids
    },
    // 获取授权的用户的项目列表
    async getAuthUserProjectList() {
      this.formLoading = true
      const res = await selectAuthUserProject({ needUserId: true }).catch(() => false)
      this.formLoading = false
      if (res === false) return
      this.formProjectOptions = res.data || []
    },
    // 获取检查人员
    async getPrincipalList() {
      const userFid = store.getters.user?.fid
      const { form } = this
      // const { projectId } = this.form
      // if (!projectId) return (this.principalList = [])

      // GCCJRY 工程抽检人员
      // const opt = { roleKey: 'GCCJRY', projectId }
      const opt = { roleKey: 'GCCJRY' }
      this.principalLoading = true
      const res = await getUserByRoleKey(opt).catch(() => false)
      this.principalLoading = false
      if (res === false) return (this.principalList = [])

      const data = res.data || []
      this.principalList = data

      // 新增时，若登录用户是抽检人员，自动填入
      if (form.prjchkId || form.principalId || !auth.hasRole('GCCJRY') || !userFid) return
      const item = data.find(i => i.fid === userFid)
      if (!item) return
      form.principalId = item.fid
      form.principalUserName = item.nickName
    },
    // 检查人员改变时，手动赋值 principalUserName
    onChangePrincipalId(id) {
      if (!id) return (this.form.principalUserName = '')
      const list = this.principalList || []
      const item = list.find(i => i.fid === id)
      this.form.principalUserName = item?.nickName || ''
    },
    changeXmPrincipal() {
      // 改变项目时，若有 项目总、项目工程负责人、项目经理，则覆盖现有值
      const { projectId } = this.form
      if (!projectId) return

      const list = this.formProjectOptions
      const data = list.find(i => i.fid === projectId)
      if (!data) return

      if (data.xmzFids) {
        this.form.xmzId = data.xmzFids
        this.form.xmzName = data.xmzName
      }
      if (data.principalIds) {
        this.form.xmPrincipalId = data.principalIds
        this.form.xmPrincipalName = data.principalNames
      }
      if (data.xmjlId) {
        this.form.xmjlId = data.xmjlId
        this.form.xmjlName = data.xmjlName
      }
    },
    // 打开选择用户
    openSelectUser(idField, nameField, multi) {
      this.selectUserOption = { idField, nameField, multi: !!multi }
      let selectedUser = []
      const idValue = this.form[idField] || ''
      const nameValue = this.form[nameField] || ''
      const ids = idValue ? idValue.split(',') : []
      const names = nameValue ? nameValue.split(',') : []
      if (ids.length && names.length) {
        selectedUser = ids.map((id, index) => ({ value: id, label: names[index] }))
      }
      this.selectedUser = selectedUser
      this.showSelectUserVisible = true
    },
    // 选择用户回调
    selectUserCallback(selection) {
      const { idField, nameField } = this.selectUserOption
      this.form[idField] = selection.map(i => i.value).join(',')
      this.form[nameField] = selection.map(i => i.label).join(',')
    },
    // 表单重置
    reset() {
      // 重置 form
      this.form = {
        prjchkId: '',
        projectId: '',
        rdcType: '',
        principalId: '',
        principalUserName: '',
        checkDate: '',
        progressChkType: '',
        xmzId: '',
        xmzName: '',
        xmPrincipalId: '',
        xmPrincipalName: '',
        xmjlId: '',
        xmjlName: '',
        colonyId: '',
        colonyName: '',
        businessId: '',
        businessName: '',
        expertId: '',
        expertName: '',
        constructionId: '',
        constructionName: '',
        constructionUser: '',
        inpectionCaliber: '',
        section: '',
        sectionId: '',
        recheckPrjchkId: '',
        status: 1
      }

      this.randomForm = {
        buildingId: [],
        chkitemCode: [],
        startfloor: null,
        endfloor: null,
        startRoom: null,
        endRoom: null,
        randomMethod: ''
      }
      this.generateCondition = {
        chkitemCode: null,
        randomMethod: null,
        floorType: null,
        randomCount: null,
        byBuilding: false
      }
      this.formActive = 0
      this.poolList = []
      this.conditionList = []
      this.isRecheck = false
      this.isRecheckRelation = false
      this.resetForm('form')
      this.resetForm('randomForm')
      this.resetForm('generateCondition')
      this.randomForm.versionCode = this.versionCode
    },
    /** 保存抽检基础信息 */
    async submitForm(opts) {
      const valid = await this.$refs.form.validate().catch(() => false)
      if (!valid) return

      this.form.processType = this.processType
      const opt = { ...this.form }
      opt.versionCode = this.$route.query.versionCode
      opt.chkitemCode = this.$route.query.chkitemCode
      if (this.processType === 'handcover' && !opt.progressChkType) {
        opt.progressChkType = CQ_PROGRESS_CHK_TYPE.ROUTINE_CHK
      }
      if (opts?.isRepeatEntry) opt.isRepeatEntry = opts.isRepeatEntry

      if (opt.prjchkId) {
        this.submitFormLoading = true
        const res = await cqEvalPrjchkEdit(opt).catch(() => false)
        this.submitFormLoading = false
        if (res === false) return

        this.msgSuccess('修改成功')
        this.goStep1()
        return
      }

      delete opt.prjchkId
      this.submitFormLoading = true
      const res = await cqEvalPrjchkAdd(opt).catch(() => false)
      this.submitFormLoading = false
      if (res === false) return

      // 已有相似的数据
      if (res.data?.isRepeatEntry === 'duplicate') return this.$refs.SimilarDataConfirm.open(res.data)

      this.msgSuccess('新增成功')
      this.form.prjchkId = res.data.prjchkId
      this.$nextTick(() => this.goStep1())
    },
    goStep1() {
      this.formActive = 1
      this.$refs.RdcAreaList.getList()
      // 仅为了刷新列表，close 名不副实
      this.$emit('close')
    },
    changeConditionScoreType() {
      this.generateCondition.randomMethod = ''
      this.$refs.conditionRandomMethod?.resetField()
    },
    changeConditionRandomMethod() {
      // 测区类型改变时，设置楼层类型默认值
      this.generateCondition.floorType = this.showFloorType ? 1 : null
    },
    // 生成测区抽检区域
    async generateRandom() {
      const { build2Name } = this
      const poolList = JSON.parse(JSON.stringify(this.poolList))
      const poolData = []
      // 获取楼栋名称
      poolList.map(i => {
        const ids = i.buildingId
        if (Array.isArray(ids)) return ids.map(id => poolData.push({ ...i, buildingId: id, buildingName: build2Name[id] }))
        poolData.push({ ...i, buildingName: build2Name[ids] })
      })

      const { projectId, prjchkId } = this.form
      poolData.forEach(item => {
        item.scoreType = item.chkitemCode
      })
      this.conditionList.forEach(item => {
        item.scoreType = item.chkitemCode
      })
      const params = {
        rdcParamDetailVOS: poolData,
        rdcParamVOS: this.conditionList,
        projectId,
        randomId: prjchkId
      }
      this.generateLoading = true
      const res = await generateRandom(params).catch(() => false)
      this.generateLoading = false
      if (res === false) return

      this.$refs.generateCondition.resetFields()
      this.conditionList = []

      const data = res.data || []
      if (!data.length) return

      this.$refs.RdcAreaList.getList({ currentResultList: data })
    },
    handleOk() {
      this.open = false
      this.$emit('close')
    }
  }
}
</script>
<style scoped lang="scss">
.steps-row {
  margin: -20px 0 10px 0;
}
.basic-info-form {
  .fake-selector {
    cursor: pointer;
    /deep/ {
      .el-input__inner {
        cursor: pointer;
        border-right: none;
        &:hover,
        &:focus {
          border-color: #dcdfe6;
        }
      }
      .el-input-group__append {
        background-color: transparent;
        padding: 0 10px;
      }
    }
  }
  .construction-dialog-footer {
    padding-top: 10px;
    text-align: right;
  }
}
.spot-check-area {
  .pool-condition {
    display: flex;
    overflow-x: auto;
  }
  .pool-item {
    width: 50%;
    min-width: 800px;
    position: relative;
    display: flex;
    flex: 1;
    background-color: #f8f8f9;
    border-radius: 8px;
    padding: 15px;
  }
  .pool-title {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
  }
  .select-firezone /deep/ .el-select__tags {
    > span {
      display: flex;
      width: 100%;
    }
    .el-tag:first-child {
      display: flex;
      align-items: center;
      overflow: hidden;
      .el-select__tags-text {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .el-icon-close {
        vertical-align: middle;
        flex-shrink: 0;
        margin-right: 5px;
      }
    }
  }
  .build-refresh {
    margin-left: 3px;
    cursor: pointer;
    &:hover {
      color: #409eff;
    }
    &.loading {
      color: #409eff;
      animation: rotating 2s linear infinite;
      pointer-events: none;
    }
  }
  .relation-accord {
    width: 20px;
    text-align: center;
    color: #e4e7ed;
  }
  .btn-generate {
    position: absolute;
    bottom: 5px;
    right: 15px;
    width: calc(100% - 270px);
    height: 30px;
  }
}
.building-select {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 6px 20px;
  background-color: white;
  box-shadow: 0 0 10px #eee;
}
.action-btns {
  position: fixed;
  z-index: 9;
  right: 0;
  bottom: 0;
  width: 100%;
  text-align: right;
  padding: 10px 20px 20px;
  background-color: white;
}
  .add-section-tip{
    color: #C0C4CC;
    font-size: 14px;
    font-weight: normal;
  }
</style>
